<template>
    <section class="wrapper" >

        <el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="岗位类型:">
                        <el-select v-model="filter.typeName" placeholder="请选择" size="small">
						    <el-option
						      v-for="item in jbTypes"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="岗位名称:">
                        <el-input placeholder="岗位名称" v-model="filter.name" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="岗位等级:">
                        <el-select v-model="filter.level" placeholder="岗位等级"  size="small">
                            <el-option
                                    v-for="item in postLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="getPostList" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row class="addrefsh">
            <el-button size="small" icon="el-icon-plus" @click="addPost">添加</el-button>
            <el-button size="small" @click="getPostList"><i class="fa fa-refresh"></i> 刷新</el-button>
        </el-row>
							
        <el-table :data="postList" style="width: 100%">
            <el-table-column type="index" width="55"></el-table-column>
            <el-table-column prop="typeName" label="岗位类型" min-width="100"></el-table-column>
            <el-table-column prop="name" label="岗位名称" min-width="120"></el-table-column>
            <el-table-column prop="level" label="岗位等级" min-width="100"></el-table-column>
            <el-table-column prop="createUser" label="创建者" min-width="120"></el-table-column>
            <el-table-column prop="gmtCreateText" label="创建时间" min-width="150"></el-table-column>
            <el-table-column prop="gmtModifyText" label="修改时间" min-width="150"></el-table-column>

            <el-table-column label="操作" min-width="160" fixed="right">
                <template scope="scope">
                    <div class="operator-btn">
                        <el-button type="primary" icon="el-icon-edit" size="mini"
                                   @click="editPost(scope.row)"
                                   style="margin-right: 10px;">编辑
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deletePost(scope.row)">删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="paging">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pagingData.pageNum"
                    :page-sizes="pagingData.pageSizes"
                    :page-size="50"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingData.total">
            </el-pagination>
        </el-row>
	
        <el-dialog @close="()=>{this.editDialogVisible = false}" :title="type == 0 ? '添加':'编辑'" :visible.sync="editDialogVisible"  style="width: 60%;margin: auto;">
            <el-form :model="rulesData"  ref="rulesData"  label-width="120px" :rules="rules">
				<el-form-item label="岗位类型:" prop="templateName">
                        <el-select v-model="rulesData.templateName" placeholder="请选择">
						    <el-option
						      v-for="item in jbTypes"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
                </el-form-item>
                <el-form-item label="岗位名称:" prop="typeName">
                    <el-input placeholder="岗位名称" v-model="rulesData.typeName" size="small" style="width: 217px;"></el-input>
                </el-form-item>
                <el-form-item label="岗位等级:" prop="level">
	                <el-select v-model="rulesData.level" placeholder="岗位等级"  size="small">
	                    <el-option
	                            v-for="item in postLevels_two"
	                            :key="item.value"
	                            :label="item.label"
	                            :value="item.value">
	                    </el-option>
	                </el-select>
	            </el-form-item>

            </el-form>
            <div slot="footer" class="bottom-btn">
                <el-button @click="saveInfo(type)" type="primary" icon="el-icon-upload2" size="small">保 存</el-button>
                <el-button @click="editDialogVisible = false" type="warning" icon="el-icon-close"  size="small">取 消</el-button>
            </div>
        </el-dialog>


    </section>
</template>

<script>
	import axios from '~/plugins/axios';
    import { postLevel } from '../../../assets/js/option';
    import { postLevels_two } from '../../../assets/js/option_two'; 
    import Vue from 'vue';
    import { mapGetters } from 'vuex';
    import {Row, Col, Input, FormItem, Form, Table, TableColumn, Pagination ,Button ,Select, 
    Option, Cascader,MessageBox,Message,Dialog} from 'element-ui' ;
    
    Vue.use(Row);
    Vue.use(Input);
    Vue.use(Col);
    Vue.use(FormItem);
    Vue.use(Form);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Cascader);
    Vue.use(Dialog);

	Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
        head(){
            return {
                title: "岗位管理"
            }
        },
        data() {
            return {
                tabName: '岗位管理',
            	rulesData: {
                    templateName: '',   //岗位类型
                    typeName: '',    //岗位名称
                 	level: '',		//岗位等级
                 	id: ''			//岗位id
                },
            	rules: {
            		 templateName: [
                        { required: true, message: '请选择岗位类型', trigger: 'change' }
                    ],
            		typeName: [
                        { required: true, message: '请输入岗位名称', trigger: 'blur' }
                    ],
            	},
                postLevel: postLevel,
                postLevels_two: postLevels_two,
                typeList: [],
                filter:{
                    typeName: '',
                    name: '',
                    level: '',
                    pageNum: 1,
                    pageSize: 50
                },
                postList: [],
                pagingData: {
                    pageSizes: [10, 20, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
                typeProps: {
                    value: 'value',
                    label:'label',
                    children: 'children'
                },
                type:0,
                editDialogVisible : false,
            }
        },
        methods: {
            getPostList() {//获取岗位列表
                this.$store.commit('POST_SETTING_FILTER',{data: this.filter});
                this.$store.dispatch('getPostList',this.filter)
                    .then((response) => { 
                        var result = response.data;
                        if(result && result.code == 0){
                            if(result.data.list){
                                this.postList = result.data.list;
                                this.pagingData.total = result.data.total;
                                this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                            }else {
                                this.postList = [];
                                this.pagingData.total = 0;
                                this.pagingData.pageNum = 1;
                            }
                        }
                    })
            },
            getPostJob(val) {
                this.filter.typeName = val[1]
            },
            //清空筛选条件
            empty() {
                this.filter = {
                    typeName: '',
                    name: '',
                    level: '',
                    pageNum: 1,
                    pageSize: 50
                };
                this.$store.commit('POST_SETTING_FILTER',{data: this.filter});
            },
            //添加用户
            addPost(){
				this.type = 0;
				this.editDialogVisible = true;
				this.rulesData = {
					templateName: '',   //岗位类型
                    typeName: '',    	//岗位名称
                 	level: '',  	 	//岗位等级
                 	id: ''     		 	//岗位id
				}
            },
            //编辑用户
            editPost(row) {
				this.type = 1;
				this.editDialogVisible = true;
				this.rulesData.templateName = row.typeName;//this.rulesData.templateName必须放在this.rulesData.typeName 上边
				this.rulesData.typeName = row.name;
				this.rulesData.level = row.level;
				this.rulesData.id = row.id;
            },
            //删除用户
            deletePost(row) {
				MessageBox.confirm('确认删除' + row.name + '岗位吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteCustomer(row.id);
                })
                .catch(() => {
                        Message.info({
                            message: '已取消删除'
                    })
                })
            },
            deleteCustomer (id) {
                this.$store.dispatch('deletePost', {id: id})
                .then((response) => {
                    var result = response.data;
	                    if (result.successed) {
							for(let i =0;i<this.postList.length;i++){
								if(this.postList[i].id == id){
									this.postList.splice(i,1);
									this.pagingData.total -= 1;
								}
							}
	                        Message.success({
	                            message: '删除成功'
	                        });
	                    }else{
	                    	Message.error({
	                        message: '删除失败'
	                    })
                    }
                })
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                this.getPostList();
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.filter.pageNum = 1;
                this.getPostList();
            },
            saveInfo(type){
            	if(!this.rulesData.templateName){
                    Message.warning({
                        message: '请选择岗位类型'
                    });
                    return;
                }else if(!this.rulesData.typeName){
                    Message.warning({
                        message: '请输入岗位名称'
                    });
                    return;
                }
                this.editDialogVisible = false;
                this.rulesData.name = this.rulesData.typeName;
                this.rulesData.typeName = this.rulesData.templateName;
                this.rulesData.level = this.rulesData.level;
                switch(type){
                	case 0:
                		this.$store.dispatch('addPost',this.rulesData).then((response)=>{
							this.getPostList();
						});
					break;
					case 1:
						this.$store.dispatch('updatePost',this.rulesData).then((response)=>{
							this.getPostList();
						});
					break;
                }
            }
        },
        created(){
            if(this.$store.getters.postSettingFilter != '') {
                this.filter = this.$store.getters.postSettingFilter
            }
            this.getPostList();
            this.$store.dispatch('getJobList');
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        },

        computed : {
            ...mapGetters({
                'jbTypes' : 'getJobList',
                'pageTabsList': 'getPageTabsList'
            })
        }
    }
</script>
<style scoped lang="scss">
	.wrapper{
        .paging {
            margin-top: 15px;
        }
		.addrefsh{
			margin-bottom: 15px;
		}
        .operator-btn{
            .el-button + .el-button{
                margin-left:0;
            }
        }
	}
</style>